<template>
    <el-form :model="form" ref="form" :inline="inline" :label-width="lableWidth? lableWidth: '60' + 'px'" :label-position="labelPosition ? labelPosition : ''">
        <el-form-item v-for="item in formLabel" :key="item.model" :label="item.label" size="small">
            <el-input v-model="form[item.model]" :placeholder="'请输入'+item.label" clearable v-if="item.type === 'input'"></el-input>

            <el-select v-model="form[item.model]" :placeholder="item.label" v-if="item.type === 'select'">
                <el-option v-for="opt in item.opts" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
            </el-select>

            <el-date-picker style="width:250px"
                v-model="form[item.model]" v-if="item.type === 'date'"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd hh:mm:ss"
                start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>

            <el-radio-group v-model="form[item.model]" v-if="item.type === 'radio'">
                <el-radio v-for="rad in item.rads" :key="rad.value" :label="rad.value">{{rad.label}}</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item size="small">
            <!-- 作用域插槽 -->
            <slot></slot>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
  props: {
    inline: Boolean,
    lableWidth: String,
    form: Object,
    formLabel: Array
  },
  data () {
    return {
      labelPosition: 'right'
    }
  },
  methods: {
    // // 点击搜索返回form
    // search () {
    //   this.$emit('search', this.form)
    // },
    // reset () {
    //   for (const key in this.form) {
    //     this.form[key] = ''
    //   }
    //   this.$emit('reset', this.form)
    // }
  }
}
</script>

<style lang="scss" scoped>
    .el-form-item{
            /deep/.el-form-item__label{
                font-weight: 700 !important;
            }
            .el-form-item__content{
            }
            /deep/.el-select .el-input__inner {
                width: 100px;
            }
            /deep/.el-radio-group{
                padding-top: 6px;
            }
        }
</style>
